import React from 'react'
import { Form,Table, Icon, Tag, Modal, Steps, Button, message,Input,Row,Col,Select,DatePicker,InputNumber,Badge } from 'antd'
import moment from 'moment';
import { METHODS } from 'http';
import style from './List.less'
import { SIGTERM } from 'constants';

class changeHistory extends React.Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }
    goDetails = (id) => {
        const { goDetails } = this.props
        goDetails(id)
    }
    render(){
        const { historyDetails } = this.props
        const name = []
        if(historyDetails){
            historyDetails.map((item,i)=>{
                name.push(
                    <div style={{border:"1px solid #E9E9E9",borderRadius:5,marginBottom:20}}>
                            <Row className={style.rows} style={{background:"#f7f7f7",borderRadius:5}}>
                                <Col className={style.firstCol1} span={20}>
                                    <Icon type="pushpin-o" style={{color:"black",marginRight:10}}/>
                                    档案历史版本:<span>{moment(item.application?item.application.createdTime:"").format("YYYY-MM-DD")}</span>
                                </Col>
                                <Col className={style.cols} span={4} onClick={this.goDetails.bind(null,item.id)}>
                                    <a href="#">查看版本详情</a>
                                </Col>
                            </Row>  
                            <Row className={style.rows}>
                                <Col className={style.firstCol} span={4}>
                                    <Badge status="success"/> 变更信息
                                </Col>  
                                <Col className={style.cols} span={20}>
                                    <Col className={style.secondCol} span={6}>申请人：{item.applicantName}</Col>
                                    <Col className={style.secondCol} span={6}>申请时间：{moment(item.createdTime).format("YYYY-MM-DD")}</Col>
                                    <Col className={style.secondCol} span={6}>审批人：{item.auditorName}</Col>
                                    <Col span={6}>审批时间：{moment(item.updateTime).format("YYYY-MM-DD")}</Col>
                                </Col>
                            </Row>
                            <Row className={style.rows}>
                                <Col className={style.firstCol} span={4}>
                                    <Badge status="success"/> 归档信息
                                </Col>
                                <Col className={style.cols} span={20}>
                                    <Col className={style.secondCol} span={6}>申请人：{item.application?item.application.applicantName:""}</Col>
                                    <Col className={style.secondCol} span={6}>申请时间：{moment(item.application?item.application.createdTime:"").format("YYYY-MM-DD")}</Col>
                                    <Col className={style.secondCol} span={6}>审批人：{item.application?item.application.auditorName:""}</Col>
                                    <Col span={6}>审批时间：{moment(item.application?item.application.updateTime:"").format("YYYY-MM-DD")}</Col>
                                </Col>
                            </Row>  
                            <Row style={{lineHeight:"40px"}}>
                                <Col className={style.firstCol} span={4}>
                                    <Badge status="error"/> 变更理由
                                </Col>
                                <Col span={20} style={{paddingLeft:20}}>
                                    {item.opinion}
                                </Col>
                            </Row>
                        </div> 
                )
            })
        }

        return(
            <div>
                <h3 className={style.titles} style={{background:"#ECF6FD",border:"1px solid #108ee9"}}>
                    <Icon type="exclamation-circle" style={{color:"#108ee9",marginRight:5}}/>
                    该档案变更次数：<span style={{color:"#008cec"}}>{historyDetails.length}</span>次   
                    您可以点击 “查看版本详情” 按钮查看该档案历史版本详情
                </h3>  
                <div>
                    {name}
                </div>    
                {/*<div style={{border:"1px solid #E9E9E9",borderRadius:5,marginBottom:20}}>
                    <Row className={style.rows} style={{background:"#f7f7f7",borderRadius:5}}>
                        <Col className={style.firstCol1} span={20}>
                            <Icon type="pushpin-o" style={{color:"black",marginRight:10}}/>
                            档案历史版本:<span>2018-05-01</span>
                        </Col>
                        <Col className={style.cols} span={4} onClick={this.goDetails}>
                            <a href="#">查看版本详情</a>
                        </Col>
                    </Row>  
                    <Row className={style.rows}>
                        <Col className={style.firstCol} span={4}>
                            <Badge status="success"/> 变更信息
                        </Col>  
                        <Col className={style.cols} span={20}>
                            <Col className={style.secondCol} span={6}>申请人：王小明</Col>
                            <Col className={style.secondCol} span={6}>申请时间：2018-05-10</Col>
                            <Col className={style.secondCol} span={6}>审批人：李小虎</Col>
                            <Col span={6}>审批时间：2018-05-10</Col>
                        </Col>
                    </Row>
                    <Row className={style.rows}>
                        <Col className={style.firstCol} span={4}>
                            <Badge status="success"/> 归档信息
                        </Col>
                        <Col className={style.cols} span={20}>
                            <Col className={style.secondCol} span={6}>申请人：王小明</Col>
                            <Col className={style.secondCol} span={6}>申请时间：2018-05-10</Col>
                            <Col className={style.secondCol} span={6}>审批人：李小虎</Col>
                            <Col span={6}>审批时间：2018-05-10</Col>
                        </Col>
                    </Row>  
                    <Row style={{lineHeight:"40px"}}>
                        <Col className={style.firstCol} span={4}>
                            <Badge status="error"/> 变更理由
                        </Col>
                        <Col span={20} style={{paddingLeft:20}}>
                            公证书资料有更新 需同步到电子版
                        </Col>
                    </Row>
                </div>*/} 
            </div>
        )
    }
}

export default changeHistory